<template>
  <div id="datail">
    <detailnavbar
      backcolor="gray"
      @titleclick="titleclick"
      ref="detailnavbar"
    />
    <scroll class="content" ref="scroll" :probeType="3" @scroll="detailsrcoll">
      <detailswiper :topImges="topImges" />
      <detalibaseinfo :goods="goods" />
      <detailshopinfo :shop="Shop"></detailshopinfo>
      <detailgoodsInfo :detailInfo="detailInfo" @imageLoad="goodsimgload" />
      <detailgoodsParams ref="params" :paramInfo="goodsparams" />
      <detailcommentInfo ref="comment" :commentInfo="commentInfo" />
      <!-- <van-empty
        class="custom-image"
        :image="require('@/assets/img/error/404.jpg')"
        v-if="!ishavedata"
      /> -->
      <detailrecommend ref="recommend" :goodlist="getcommendlist" />
    </scroll>
    <backtop @click="detailbacktop" v-if="backtopshow" />
    <DetailBottomBar @addToCart="addToCart" />
  </div>
</template>

<script>
let errorpage = require("@/assets/img/error/404.jpg");

import detailnavbar from "./Children/DetailNavbar";
import detailswiper from "./Children/DetailSwiper";
import detalibaseinfo from "./Children/Detailbaseinfo";
import detailshopinfo from "./Children/Detailshopinfo";
import detailgoodsInfo from "./Children/DetailgoodsInfo";
import detailgoodsParams from "./Children/Detaiparams";
import detailcommentInfo from "./Children/DetailCommentInfo";
import detailrecommend from "@/components/content/goodsShow/goodShow";
import DetailBottomBar from "./Children/DatailBottomBar";

import scroll from "@/components/common/better-scroll/scroll";
import { getdetail, Goods, Shop, GoodsParam } from "@/network/detail";
import { getRecommend } from "@/network/recommend";
import { debounce } from "@/common/util";
import { itemListentermixin, backTop } from "@/common/mixin";
import { Toast } from "vant";

export default {
  name: "detail",
  data() {
    return {
      id: null,
      topImges: null,
      goods: {},
      Shop: {},
      detailInfo: {},
      goodsparams: {},
      commentInfo: {},
      //recommend: [], //我已经将推荐的数据添加vuex，这里不删除，是懒得写一个计算属性了
      scrollInfoY: [], //获取对应组件的y值
      getInfoY: null, //图片加载完后 取出对应的y值的 防抖函数
      currentIndex: 0,
    };
  },
  computed: {
    getcommendlist() {
      return this.$store.getters.getrecommendlist[0];
    },
  },
  methods: {
    goodsimgload() {
      //商品图片
      // this.$refs.scroll.refresh();
      this.newRefresh();
      this.getInfoY();
    },
    titleclick(index) {
      // console.log(index);
      this.$refs.detailnavbar.crruntindex = index;
      this.$refs.scroll.scrollTo(0, -this.scrollInfoY[index], 200);
    },
    detailsrcoll(position) {
      const positionY = -position.y;
      let length = this.scrollInfoY.length;
      for (let i = 0; i < length; i++) {
        if (
          positionY >= this.scrollInfoY[i] &&
          positionY < this.scrollInfoY[i + 1]
        ) {
          // if (this.currentIndex != i) {
          //   console.log(i);
          //   // this.currentIndex = i;
          //   this.$refs.detailnavbar.crruntindex = i;
          // }
          this.$refs.detailnavbar.crruntindex = i;
          break;
        }
      }
      /**
       * 判断的方案:
       *  方案一:
       *    条件: (i < (length-1) && currentPos >= iPos && currentPos < this.themeTops[i+1]) || (i === (length-1) && currentPos >= iPos),
       *    优点: 不需要引入其他的内容, 通过逻辑解决
       *    缺点: 判断条件过长, 并且不容易理解
       *  方案二:
       *    条件: 给themeTops最后添加一个很大的值, 用于和最后一个主题的top进行比较.
       *    优点: 简洁明了, 便于理解
       *    缺点: 需要引入一个较大的int数字
       * 疑惑: 在第一个判断中, 为什么不能直接判断(currentPos >= iPos)即可?
       * 解答: 比如在某一个currentPos大于第0个时, 就会break, 不会判断后面的i了.
       */
      this.Showbacktop(position);
    },
    detailbacktop() {
      this.backtop();
    },
    addToCart() {
      const obj = {};
      // 2.商品信息
      obj.id = this.id;
      obj.imgURL = this.topImges[0];
      obj.title = this.goods.title;
      obj.desc = this.goods.desc;
      obj.newPrice = this.goods.realPrice;
      obj.oldPrice = this.goods.oldPrice;
      obj.shoplogo = this.Shop.logo;
      obj.shopname = this.Shop.name;
      this.$store.dispatch("addCart", obj).then((res) => {
        this.$toast(res);
      }); //通过vuex的adction调用mutations改变state
      // this.$toast({ message: "提示文字", className: "toast123" });
    },
  },
  mixins: [itemListentermixin, backTop],
  created() {
    this.id = this.$route.query.id;
    getdetail(this.id).then((res) => {
      if (res != null) {
        //获取详情的轮播图片
        this.topImges = res.result.itemInfo.topImages;

        //获取商品信息
        this.goods = new Goods(
          res.result.itemInfo,
          res.result.columns,
          res.result.shopInfo.services
        );

        //获取店铺信息
        this.Shop = new Shop(res.result.shopInfo);

        //获取商品信息
        this.detailInfo = res.result.detailInfo;

        //获取参数信息
        this.goodsparams = new GoodsParam(
          res.result.itemParams.info,
          res.result.itemParams.rule
        );
        //获取评论信息
        if (res.result.rate.cRate != 0) {
          this.commentInfo = res.result.rate.list[0];
        }
      } else {
        Toast("该商品没有数据哟！");
      }
    });

    //获取推荐的商品信息
    //this.$nextTick()渲染出对应的dom元素  但图片是异步获取，不一定能确认图片的高度，每次都会回调这个函数
    /* this.$nextTick(() => {
    });
    */
    this.getInfoY = debounce(() => {
      this.scrollInfoY.push(0);
      this.scrollInfoY.push(this.$refs.params.$el.offsetTop - 44);
      this.scrollInfoY.push(this.$refs.comment.$el.offsetTop - 44);
      this.scrollInfoY.push(this.$refs.recommend.$el.offsetTop - 44);
      this.scrollInfoY.push(1.7976931348623157 * 10e308); //添加一个最大的值    便于下面滚动条y值进行比较
    }, 150);
  },
  mounted() {
    //在挂载中获取el
    //在各组件中不一定获取的数据来进行判断
    //所以找不到el
    // this.detailimgloadevent = () => {
    //   console.log("detilimg");
    //   this.debouncex();
    //   // this.getInfoY();
    // };
  },
  unmounted() {
    //原 destroyed
  },
  components: {
    detailnavbar,
    detailswiper,
    detalibaseinfo,
    detailshopinfo,
    detailgoodsInfo,
    detailgoodsParams,
    detailcommentInfo,
    detailrecommend,
    DetailBottomBar,
    scroll,
  },
};
</script>

<style scoped>
.content {
  margin-top: 44px;
  height: calc(100vh - 88px);
}
</style>